<script setup>
import { ref } from "vue";
import SearchHistory from "./components/searchHitory";
import SearchSuggest from "./components/searchSuggest.vue";
import SearchHot from "./components/searchHot.vue";
import SearchResult from "./components/searchResult.vue";

const searchKeyWords = ref("");
const isShowSearchResult = ref(false);
const onSearch = (e) => {
  if (typeof e === "string") searchKeyWords.value = e;
  isShowSearchResult.value = true;
};
</script>

<template>
  <view class="search-wrap">
    <view class="search-input-wrap">
      <i class="iconfont icon-sousuo"></i>
      <input
        type="text"
        class="search-input"
        v-model="searchKeyWords"
        @focus="isShowSearchResult = false"
      />
      <text class="search-text" @tap="onSearch">搜索</text>
    </view>
    <SearchResult v-if="isShowSearchResult" />
    <SearchSuggest
      v-else-if="searchKeyWords"
      @search="onSearch($event)"
      :keyWords="searchKeyWords"
    />
    <template v-else>
      <SearchHistory />
      <SearchHot />
    </template>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
.search-wrap {
  padding: 0 30rpx;
  font-size: 28rpx;
  .search-input-wrap {
    display: flex;
    align-items: center;
    .icon-sousuo {
      line-height: 70rpx;
      width: 100rpx;
      text-align: center;
      background-color: #fff;
      border-radius: 40rpx 0 0 40rpx;
    }
    .search-input {
      height: 70rpx;
      width: 100%;
      background-color: #fff;
      border-radius: 0 40rpx 40rpx 0;
    }
    .search-text {
      width: 100rpx;
      text-align: right;
    }
  }
}
</style>
